import * as React from 'react';
import { use{{componentName}} } from './use{{componentName}}';
import { {{componentName}}Props } from './{{componentName}}.types';
import { render{{componentName}} } from './render{{componentName}}';
import { use{{componentName}}Styles } from './use{{componentName}}Styles';

/**
 * {{componentName}} component
 */
export const {{componentName}} = React.forwardRef<HTMLElement, {{componentName}}Props>((props, ref) => {
  const state = use{{componentName}}(props, ref);

  use{{componentName}}Styles(state);
  return render{{componentName}}(state);
});

{{componentName}}.displayName = '{{componentName}}';
